<template>
  <view>
    <view class="img_wrapper" v-if="details.fileType == 'image' && details.fileUrl">
      <image :src="details.fileUrl" class="top_banner"></image>
    </view>
    <view class="video_wrapper" v-if="details.fileType == 'video' && details.fileUrl && showVideo">
      <video :src="details.fileUrl"
             class="video"
             show-center-play-btn
             controls></video>
    </view>
    <view class="u-padding-30" v-if="details.jobAnalyze">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>职业介绍</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.jobAnalyze}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7"></view>

    <view class="u-padding-30" v-if="details.specialtyJobRelationList.length">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>大学专业类推荐</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        <navigator :url="`/pages/explore/zhuanye_lei?code=${item.secSpeCode}&name=${item.specialtyName}`" class="color-active u-padding-10" v-for="(item, index) in details.specialtyJobRelationList">
          {{item.specialtyName}}
        </navigator>
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.specialtyJobRelationList.length"></view>

    <view class="u-padding-30" v-if="details.jobDefinition">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>职业定义</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.jobDefinition}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.jobDefinition"></view>

    <view class="u-padding-30" v-if="details.salaryDesc">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>薪酬待遇</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.salaryDesc}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.salaryDesc"></view>

    <view class="u-padding-30" v-if="details.inforBack">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>知识背景</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.inforBack}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.inforBack"></view>

    <view class="u-padding-30" v-if="details.developProspect">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>发展前景</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.developProspect}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.developProspect"></view>

    <view class="u-padding-30" v-if="details.jobKill">
      <view class="title font-28 color-333 row">
        <view class="border"></view>
        <view>职业技能</view>
      </view>
      <view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
        {{details.jobKill}}
      </view>
    </view>
    <view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.jobKill"></view>

  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {getCurrentFullPath} from "../../util/util";

  export default {
    async onLoad(option) {
      this.getDetail(option.id)
      let showVideo = await this.getDictByType('videoSwitch')
      if (!showVideo.length) {
        this.showVideo = true
      } else {
        if (showVideo[0].dictValue == 0) {
          this.showVideo = false
        } else {
          this.showVideo = true
        }
      }
    },

    data() {
      return {
        details: {},
        showVideo: true
      }
    },

    methods: {
      async getDictByType(dictType) {
        if (!dictType) return []
        let res = await request({
          url: '/system/wx/dict/type/' + dictType,
          token: true,
        })
        return res.data
      },

      getDetail(detail) {
        request({
          url: '/system/wx/CompassJobInfo/' + detail,
          token: true
        }).then(res => {
          this.details = res.data
          uni.setNavigationBarTitle({
            title: res.data.jobName || ''
          });
        })
      }
    },
    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }

</script>

<style scoped lang="scss">
  .title {
    .border {
      width: 4px;
      background: #1f476d;
      margin-right: 20upx;
    }
  }
  .top_banner {
    width: 100%;
    height: 360upx;
  }
  .video {
    width: 100%;
    height: 400upx;
  }
</style>
